<template>
	<view class="page detail-page">
		<view class="content">
			<view v-show="result.salaryType === 'wage'">
				<view class="form-item">
					<label class="item-label">税前收入：</label>
					<view class="item-content">
						<text class="text">{{result.grossPay}}元</text>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">五险一金：</label>
					<view class="item-content">
						<text class="text">{{result.socialBenef}}元</text>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">个税：</label>
					<view class="item-content">
						<text class="text">{{result.taxableAmount}}元</text>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">税后收入：</label>
					<view class="item-content">
						<text class="text"><text class="color-error">{{result.afterTax}}</text>元</text>
					</view>
				</view>
				<view class="table table-head">
					<view>类别</view>
					<view>个人缴纳</view>
					<view>比例</view>
					<view>单位缴纳</view>
					<view>比例</view>
				</view>
				<view class="table">
					<view>养老保险</view>
					<view>{{result.endowmentPerson}}</view>
					<view>{{result.endowmentRate}}%</view>
					<view>{{result.endowmentCompany}}</view>
					<view>13%</view>
				</view>
				<view class="table">
					<view>医疗保险</view>
					<view>{{result.medicalePerson}}</view>
					<view>{{result.medicaleRate}}%</view>
					<view>{{result.medicaleCompany}}</view>
					<view>6.2%</view>
				</view>
				<view class="table">
					<view>失业保险</view>
					<view>{{result.unemploymentPerson}}</view>
					<view>{{result.unemploymentRate}}%</view>
					<view>{{result.unemploymentCompany}}</view>
					<view>0.7%</view>
				</view>
				<view class="table">
					<view>工伤保险</view>
					<view>{{result.injuryPerson}}</view>
					<view>{{result.injuryRate}}%</view>
					<view>{{result.injuryCompany}}</view>
					<view>0.2%</view>
				</view>
				<view class="table">
					<view>生育保险</view>
					<view>{{result.birthPerson}}</view>
					<view>{{result.birthRate}}%</view>
					<view>{{result.birthCompant}}</view>
					<view>0.45%</view>
				</view>
				<view class="table">
					<view>公积金</view>
					<view>{{result.providentFundPerson}}</view>
					<view>{{result.providentFundRate}}%</view>
					<view>{{result.providentCompany}}</view>
					<view>{{result.providentFundRate}}%</view>
				</view>
				<view class="table">
					<view>个税</view>
					<view>{{result.taxableAmount}}</view>
					<view>-</view>
					<view>-</view>
					<view>-</view>
				</view>
				<view class="table">
					<view>合计</view>
					<view>{{result.socialBenef * 1 + result.taxableAmount * 1 }}</view>
					<view>{{result.totalRate}}%</view>
					<view>{{result.socialBenefCompany}}</view>
					<view>{{result.companyTotalRate}}%</view>
				</view>
			</view>
			<view v-show="result.salaryType === 'annualBonus'">
				<view class="form-item">
					<label class="item-label">税前：</label>
					<view class="item-content">
						<text class="text">{{result.annualPay}}元</text>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">个税：</label>
					<view class="item-content">
						<text class="text">{{result.taxableAmount}}元</text>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">税后：</label>
					<view class="item-content">
						<text class="text">{{result.afterTax}}元</text>
					</view>
				</view>
			</view>
			<!-- ucharts渲染模板 -->
			<view class="uni-charts">
				<view class="qiun-columns">
					<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
						<view class="qiun-title-dot-light">工资去向</view>
					</view>
					<view class="qiun-charts" >
						<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
					</view>
				</view>
			</view>
		</view>
		<button class="mini-btn margin-top-20" type="primary" plain="true" @click="goBack">返回</button>
	</view>
</template>

<script>
	import uCharts from "@/components/u-charts/u-charts.js"
	//ucharts实例定义为全局变量，否则在小程序端报错
	let canvaPie = null
	export default {
		data(){
			return {
				result: {},
				//ucharts相关数据
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
			}
		},
		onLoad(option){
			//初始化ucharts宽高
			this.cWidth=uni.upx2px(590);//750upx - 4* 40 upx
			this.cHeight=uni.upx2px(600);
			
			this.result = getApp().globalData.wageResult
			console.log('globalData', getApp().globalData)
			
			if(this.result.salaryType === 'wage'){
				let { endowmentPerson, medicalePerson, unemploymentPerson, injuryPerson, birthPerson, providentFundPerson, taxableAmount, afterTax } = this.result
				this.serverData = [{
					name: '养老保险',
					color: '#90ED7D',
					data: parseInt(endowmentPerson)
				},{
					name: '医疗保险',
					color: '#8543E0',
					data: parseInt(medicalePerson)
				},{
					name: '失业保险',
					color: '#F04864',
					data: parseInt(unemploymentPerson)
				},{
					name: '工伤保险',
					color: '#FACC14',
					data: parseInt(injuryPerson)
				},{
					name: '生育保险',
					color: '#2FC25B',
					data: parseInt(birthPerson)
				},{
					name: '住房公积金',
					color: '#5A5AAD',
					data: parseInt(providentFundPerson)
				},{
					name: '个税',
					color: '#7E3D76',
					data: parseInt(taxableAmount)
				},{
					name: '税后',
					color: '#007aff',
					data: parseInt(afterTax)
				}]
			}else if(this.result.salaryType === 'annualBonus'){
				let {taxableAmount, afterTax} = this.result
				this.serverData = [{
					name: '个税',
					color: '#8543E0',
					data: parseInt(taxableAmount)
				},{
					name: '税后',
					color: '#007aff',
					data: parseInt(afterTax)
				}]
			}
			let Pie={series: this.serverData}
			this.showPie("canvasPie", Pie)
		},
		mounted() {
			
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			showPie(canvasId,chartData){
				canvaPie=new uCharts({
					$this:this,
					canvasId: canvasId,
					type: 'pie',
					fontSize:11,
					legend:{show:true},
					background:'#FFFFFF',
					pixelRatio:this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: this.cWidth*this.pixelRatio,
					height: this.cHeight*this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
						  lableWidth:15
						}
					},
				});
			},
			touchPie(e){
				canvaPie.showToolTip(e, {
					format: item => {
						return item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.detail-page {
		.content {
			.table {
				width: 100%;
				display: flex;
				border-bottom: 1px solid $uni-border-color;
				view{
					flex: 1;
					padding: 12upx 0;
					text-align: center;
				}
			}
			.table-head{
				view{
					background: $uni-color-primary;
				}
			}
		}
	}
</style>
